<template>
	<div class="page-container">
		<h1>图片包浆</h1>
		<el-form ref="form" :model="form" label-position="top">
			<el-form-item label="请选择要处理的图片文件">
				<el-upload ref="upload" class="upload-demo" action="" :show-file-list="false"
					:before-upload="beforeUpload" :on-change="handleChange">
					<el-button size="medium" type="primary">选择文件</el-button>
					<div slot="tip" class="el-upload__tip">只能上传 png、jpg、jpeg、gif、bmp、svg、webp、tif 格式的图片</div>
				</el-upload>
			</el-form-item>
			<el-form-item style="width: 50%;" label="包浆参数">
				<el-slider v-model="toningLevel" range :min="0" :max="100"></el-slider>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="toneImage()">生成</el-button>
			</el-form-item>
			<div v-if="tonedImage">
				<el-form-item label="原始图片大小：">
					{{ originalFileSize }} KB
				</el-form-item>
				<el-form-item label="处理后的图片大小：">
					{{ tonedFileSize }} KB
				</el-form-item>
				<el-form-item label="处理后的图片：">
					<img :src="tonedImage" alt="Toned Image">
				</el-form-item>
			</div>
		</el-form>
		
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					imageFile: null,
				},
				tonedImage: null,
				originalFileSize: null,
				tonedFileSize: null,
				toningLevel: [0, 100],
			};
		},
		methods: {
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isGIF = file.type === 'image/gif';
				const isBMP = file.type === 'image/bmp';
				const isWEBP = file.type === 'image/webp';
				const isSVG = file.type === 'image/svg+xml';
				const isTIF = file.type === 'image/tiff';
				const isValidType = isJPG || isPNG || isGIF || isBMP || isWEBP || isSVG || isTIF;

				if (!isValidType) {
					this.$message.error('只能上传 png、jpg、jpeg、gif、bmp、svg、webp、tif 格式的图片');
				}

				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB');
				}

				return isValidType && isLt2M;
			},
			handleChange(file) {
				this.form.imageFile = file.raw;
			},
			toneImage() {
				const file = this.form.imageFile;

				if (!file) {
					this.$message.error('请先选择要处理的图片文件！');
					return;
				}

				const image = new Image();
				const reader = new FileReader();

				reader.onload = (event) => {
					image.src = event.target.result;
					image.onload = () => {
						const canvas = document.createElement('canvas');
						const context = canvas.getContext('2d');

						let width = image.width;
						let height = image.height;

						canvas.width = width;
						canvas.height = height;

						context.drawImage(image, 0, 0, width, height);

						const imageData = context.getImageData(0, 0, width, height);
						const pixelData = imageData.data;

						const toningMin = this.toningLevel[0] / 100.0;
						const toningMax = this.toningLevel[1] / 100.0;
						const toningRange = toningMax - toningMin;

						for (let i = 0; i < pixelData.length; i += 4) {
							const r = pixelData[i];
							const g = pixelData[i + 1];
							const b = pixelData[i + 2];

							const intensity = (r + g + b) / 3.0 / 255;
							const toningAmount = (intensity - toningMin) / toningRange;

							if (toningAmount < 0) {
								pixelData[i] = r * (1 + toningAmount);
								pixelData[i + 1] = g;
								pixelData[i + 2] = b * (1 + toningAmount);
							} else if (toningAmount > 1) {
								pixelData[i] = r * (2 - toningAmount);
								pixelData[i + 1] = g * (2 - toningAmount);
								pixelData[i + 2] = b * (2 - toningAmount);
							} else {
								pixelData[i] = r * (1 + toningAmount);
								pixelData[i + 1] = g * (1 + toningAmount);
								pixelData[i + 2] = b * (1 - toningAmount);
							}
						}

						context.putImageData(imageData, 0, 0);

						const tonedDataURL = canvas.toDataURL(file.type);

						this.originalFileSize = Math.round(file.size / 1024);
						this.tonedFileSize = Math.round(tonedDataURL.length / 1024);
						this.tonedImage = tonedDataURL;
					};
				};

				reader.readAsDataURL(file);
			},
		},
	};
</script>
